<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Tabs, TabPane, Card } from '@arco-design/web-vue';
  import { Chart } from '/@/components/Chart';
  import { ChainItem } from '/@/components/ChainItem';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useRouter } from 'vue-router';
  // import { queryCardData } from '/@/api/creator';
  import type { CardDataGetResultModel } from '/@/api/model/creatorModel';

  const router = useRouter();
  const tabs = [
    { title: '文章数据', key: PageEnum.CREATOR_DATA_CONTENT_ARTICLE },
    { title: '沸点数据', key: PageEnum.CREATOR_DATA_CONTENT_PIN },
  ];
  const activeKey = ref('');
  watch(
    router.currentRoute,
    ({ path }) => {
      activeKey.value = path;
    },
    { immediate: true },
  );
  watch(activeKey, (key) => {
    if (key !== router.currentRoute.value.path) {
      router.push(key);
    }
  });

  const cardData = ref<CardDataGetResultModel | null>(null);
  // (async () => {
  //   cardData.value = await queryCardData({
  //     datas: [
  //       'all_article',
  //       'all_article_display',
  //       'all_article_view',
  //       'all_article_digg',
  //       'all_article_comment',
  //       'all_article_collect',
  //     ],
  //   });
  // })();

  const cardDataPin = ref<CardDataGetResultModel | null>(null);
  // (async () => {
  //   cardDataPin.value = await queryCardData({
  //     datas: ['all_short_msg', 'all_short_msg_digg', 'all_short_msg_comment'],
  //   });
  // })();

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['展现', '阅读', '点赞'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '展现',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '阅读',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '点赞',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  };
</script>

<template>
  <Card>
    <Tabs hoverable v-model:activeKey="activeKey">
      <TabPane v-for="item in tabs" :key="item.key" :title="item.title">
        <template v-if="item.key === PageEnum.CREATOR_DATA_CONTENT_ARTICLE">
          <div class="flex flex-wrap mb-[14px]">
            <ChainItem title="总文章数" :data="cardData?.all_article" />
            <ChainItem title="文章展现数" :data="cardData?.all_article_display" />
            <ChainItem title="文章阅读数" :data="cardData?.all_article_view" />
            <ChainItem title="文章点赞数" :data="cardData?.all_article_digg" />
            <ChainItem title="文章评论数" :data="cardData?.all_article_comment" />
            <ChainItem title="文章收藏数" :data="cardData?.all_article_collect" />
          </div>
          <Card title="数据趋势" :bordered="false">
            <Chart class="h-[410px]" :option="option" />
          </Card>
        </template>
        <template v-if="item.key === PageEnum.CREATOR_DATA_CONTENT_PIN">
          <div class="flex flex-wrap mb-[14px]">
            <ChainItem title="总沸点数" :data="cardDataPin?.all_short_msg" />
            <ChainItem title="沸点赞数" :data="cardDataPin?.all_short_msg_digg" />
            <ChainItem title="沸点评论数" :data="cardDataPin?.all_short_msg_comment" />
          </div>
          <Card title="数据趋势" :bordered="false">
            <Chart class="h-[410px]" :option="option" />
          </Card>
        </template>
      </TabPane>
    </Tabs>
  </Card>
</template>
